<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../static/css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="../static/metro/css/m-styles.min.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<script src="../static/metro/js/m-dropdown.min.js"></script>
<script src="../static/metro/js/m-radio.min.js"></script>
<link href="../static/metro/css/m-styles.min.css" rel="stylesheet"> 

<style>
*{
	font-family: 'Open Sans', sans-serif;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
});

function SubmitLogin(){
	var $username = $('input#username');
	var $password = $('input#password');
	var username = $username.val();
	var password = $password.val();
	
	if(!ValidateLogin(username, password)){
		$username.css("background-color", "#FFFF9C");
		$password.css("background-color", "#FFFF9C");
		console.log('Login invalid');
		return;
	}
	
	$.post('/action/login', {username:username, password:password}, function(result){
		if(result.success==true){
			// Have to redirect from here because server can't redirect from a POST
			window.location = '/view/home';
		}
		else{
			console.log('Login Unsuccessful');
			$('#login_response').html('Login unsuccessful');
			$username.css("background-color", "#FF9c9c");
			$password.css("background-color", "#FF9c9c");
		}
	}, 'JSON');
}

function Register(){
	var $username = $('input#username');
	var $password = $('input#password');
	var username = $username.val();
	var password = $password.val();
	
	if(!ValidateLogin()){
		return;
	}
	$.post('/register', {username:username, password:password}, function(result){
		console.log('Register response:');
		console.log(result);
	}, 'json');
}

function ValidateLogin(username, password){
	if(username.length==0 || password.length==0){
		return false;
	}
	return true;
}

</script>
</head>
<body>

<div id='login_box' class='container_12'>
	<div class='grid_4'>
		<div class='m-input-prepend'>
			<span class='add-on' style='width: 80px;'>Username</span>
			<input type='text' id='username' class='m-wrap' style='height: 34px;' value='nate'/>
		</div>
		
		<div class='m-input-prepend'>
			<span class='add-on' style='width: 80px;'>Password </span>
			<input type='text' id='password' class='m-wrap' style='height: 34px;' value='password'/>
		</div>
		
		<div class='m-btn-group'>
			<a href='#' id='login' onclick='SubmitLogin()' class='m-btn'>Login</a>
			<a href='#' id='register' onclick='Register()' class='m-btn disabled'>Register</a>
		</div>
		<br>
		<span id='login_response'></span>
	</div>
</div>
</body>
</html>